<template>
  <div class="song-dynasty-container">
    <h2 class="title">宋朝常服</h2>
    <p class="intro">
      宋朝常服是中国历史上具有极高文化价值的服饰之一。其造型、色彩与工艺都体现了当时的社会风貌与审美情趣。
    </p>

    <!-- 服饰介绍部分 -->
    <div class="clothing-container">
      <div class="clothing-card" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
        <div class="clothing-image">
          <img :src="clothingImage" :alt="clothingName" class="fade-in" />
        </div>
        <div class="clothing-details">
          <h3>{{ clothingName }}</h3>
          <p>材质：{{ material }}</p>
          <p>颜色：{{ color }}</p>
          <p>风格：{{ style }}</p>
        </div>
      </div>
      
      <!-- 第二个服饰介绍部分 -->
      <div class="clothing-card" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
        <div class="clothing-image">
          <img :src="clothingImage1" :alt="clothingName1" class="fade-in second" />
        </div>
        <div class="clothing-details">
          <h3>{{ clothingName1 }}</h3>
          <p>材质：{{ materia1 }}</p>
          <p>颜色：{{ color1 }}</p>
          <p>风格：{{ style1 }}</p>
        </div>
      </div>
    </div>

    <!-- 动画部分 -->
    <transition name="fade" style="margin-top: 30px;">
      <p v-if="showInfo" class="extra-info">宋朝的常服以简洁大方、朴素庄重为特点。多使用丝绸等高级面料，极具文化象征。</p>
    </transition>

    <button @click="toggleInfo" class="info-toggle-btn" style="margin-top: 30px;">了解更多</button>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  // 定义响应式变量
  const clothingImage = ref("https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0420%2F00c89758j00q92v62004fc000u000trm.jpg&thumbnail=660x2147483647&quality=80&type=jpg");
  const clothingName = ref('宋朝男子常服');
  const material = ref('丝绸');
  const color = ref('棕褐色');
  const style = ref('简约优雅');
  const showInfo = ref(false);  // 控制是否显示更多信息

  const clothingImage1 = ref("https://img2.baidu.com/it/u=806867289,646614601&fm=253&fmt=auto&app=138&f=JPEG?w=721&h=500");
  const clothingName1 = ref('宋朝女子常服');
  const materia1 = ref('丝绸');
  const color1 = ref('青色');
  const style1 = ref('简约优雅');
  // 处理鼠标进入和离开事件，触发动画
  const onMouseEnter = () => {
    console.log('鼠标进入服装卡片');
  };
  
  const onMouseLeave = () => {
    console.log('鼠标离开服装卡片');
  };

  // 切换显示更多信息
  const toggleInfo = () => {
    showInfo.value = !showInfo.value;
  };
</script>

<style scoped>
.second
{
  height: 277.88px !important; 
  width: auto !important;
  margin-left: -80px;
}
/* 容器样式 */
.song-dynasty-container {
  width: 100%;
  padding: 20px;
  background-color: #f0f8ff;
  text-align: center;
  font-family: 'Arial', sans-serif;
}

.title {
  margin-left: 45%;
  font-size: 36px;
  font-weight: bold;
  color: #3c3c3c;
  margin-bottom: 20px;
}

.intro {
  font-size: 18px;
  color: #666;
  margin-bottom: 40px;
  line-height: 1.6;
}

/* 使用 flexbox 来排列服饰卡片 */
.clothing-container {
  display: flex;
  justify-content: space-evenly;
  gap: 20px; /* 控制卡片之间的间距 */
  flex-wrap: wrap; /* 使它们在小屏幕上可以换行 */
}

/* 服饰卡片样式 */
.clothing-card {
  width: 280px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
}

.clothing-card:hover {
  transform: translateY(-10px); /* 放大卡片效果 */
}

.clothing-image img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-in-out;
}

.clothing-card:hover .clothing-image img {
  transform: scale(1.1); /* 图片放大效果 */
}

.clothing-details {
  padding: 15px;
  background-color: #fafafa;
}

.clothing-details h3 {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.clothing-details p {
  font-size: 16px;
  color: #555;
  margin: 5px 0;
}

/* 动画效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.info-toggle-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #0044cc;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.info-toggle-btn:hover {
  background-color: #0033aa;
}
</style>